<!--
 * @Author: 凌宇king
 * @Date: 2022-09-24 14:26:26
 * @LastEditTime: 2022-09-25 15:50:25
-->
<template>
    <div class="container">
        <template>
            <el-divider></el-divider>
            <el-table :data="tableData" stripe border height="400">
                <el-table-column prop="orderType" label="订单类型">
                </el-table-column>
                <el-table-column prop="payMoney" label="金额">
                </el-table-column>
                <el-table-column prop="endAddress" label="地址">
                </el-table-column>
                <el-table-column prop="nickName" label="订单信息">
                    <el-link type="primary" slot-scope="scope" @click="showDetail(scope)">查看信息 </el-link>
                </el-table-column>
                <el-table-column prop="status" label="状态">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.completed === '未完成' ? 'danger' : ''" effect="plain"
                            disable-transitions>
                            {{scope.row.status ==='已帮助'&&scope.row.completed==="未完成"?'帮助中...':(scope.row.status
                            ==='待帮助'&&scope.row.completed==="未完成"?'待帮助':(scope.row.status
                            ==='已帮助'&&scope.row.completed==="已完成"?'已被成功帮助':'待帮助'))}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="publicTime" label="发单时间">
                </el-table-column>
                <el-table-column prop="menu" label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="orderView(scope)" size="mini">查看</el-button>
                        <el-popconfirm @cancel="handleCancel" style="margin-left:10px" icon-color="red"
                            title="你确定要删除这条信息吗？" @confirm="handleConfirm(scope)">
                            <el-button type="danger" slot="reference" size="mini">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage"
                    :page-size="pagesize" layout="prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </template>
        <el-dialog title="订单信息" :visible.sync="dialogVisible">
            <div class="orderDetail">
                <div class="item" v-for="(item,i) in orderInfo" :key="i"> <span>{{ item.key }}：</span> <span
                        v-if="item.key != '图片' && item.key != '打印附件'">{{ item.value }}</span>
                    <el-image v-else-if="item.key == '图片'" style="width: 100px; height: 100px" :src="item.value"
                        :preview-src-list="[item.value]"> </el-image> <template v-else>
                        <el-link type="primary" v-for="file in item.value" :key="file" :href="file" target="_blank">附件{{
                        i + 1 }}</el-link>
                    </template>
                </div>
            </div> <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">关闭 </el-button>
            </span>
        </el-dialog>
    </div>
</template>   
<script>
import { formatOrderInfo } from '@/utils/Format'
export default {
    created() {
        this.getOrderList()
        this.getadminList()
    },
    data() {
        return {
            tableData: [],
            currentPage: 1,
            pagesize: 5,
            total: 0,
            dialogVisible: false,//订单信息弹窗开关 
            orderDetail: [],//订单信息中的内容
            orderInfo: null
        }
    },
    methods: {
        getadminList() {
            this.$http.get('/adminList', {
                params: {
                    id: JSON.parse(localStorage.getItem('admin'))
                }
            }).then(res => {
                localStorage.setItem('admin', JSON.stringify(res.data.role))
            })
        },
        //展示订单详情 
        showDetail(scope) {
            this.dialogVisible = true
            //格式化订单内容信息 
            this.orderInfo = formatOrderInfo(scope.row)
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`); 
            this.page = val
            this.getOrderList()
        },
        getOrderList() {
            this.$http.get('/ordGetOrders',
                {
                    params: {
                        currentPage: this.currentPage, pagesize: this.pagesize
                    }
                }).then(res => {
                    //返回的数据在res.data中
                    // console.log(res.data)
                    if (res.data.status === 'success') {
                        this.total = res.data.total
                        this.tableData = res.data.result
                    }
                    else {
                        this.$message.error('服务器错误')
                    }
                }).catch(err => {
                    console.log(err)
                    this.$message.error('服务器错误')
                })
        },
        //查看
        orderView(scope) {
            //console.log(scope) 
            const { _id } = scope.row
            this.$router.push({ name: 'orderview', params: { _id } })
        },
        //删除
        handleConfirm(scope) {
            const { role } = JSON.parse(localStorage.getItem('admin'))
            if (role !== '超级管理员') {
                this.$message.error('对不起，您没有权限！')
                return
            }
            const { _id } = scope.row
            this.$http.get('/delOrder',
                { params: { _id } }).then(res => {
                    if (res.data === 'success') {
                        this.$message.success('删除成功')
                    } else { this.$message.error('删除失败') }
                }).catch(error => { this.$message.error('删除失败') })
            this.getOrderList()
        },
        handleCancel() {
            this.$message.error('取消操作')
        },
        //添加管理员
        addAdmin() {
            this.$router.push(`/orderEdit?${Math.random() * 1000 + 10}`)
        }


    }
}
</script>

<style lang="scss" scoped>
th {
    height: 50px;
}

.orderDetail {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;

    .item {
        text-align: left;
        margin: 5px 0;
        display: flex;
        align-items: center;

        span:nth-child(1) {
            font-weight: bold;
            font-size: 16px;
            width: 150px;
            text-align: right;
        }
    }
}

.addAdmin {
    text-align: right;
    margin: 10px;
}

.el-table {
    background-color: #F2F6FC;
}

.container {
    background-color: #F2F6FC;
    padding: 5px;
}
</style>